/*
 * @Author: silas 
 * @Date: 2021-05-12 09:52:54 
 * @Last Modified by: silas
 * @Last Modified time: 2021-06-07 15:14:54
 */
<template>
    <div class="tobBtoC">
        <!-- <div class="contentTopTitle">
            <div class="title">ICT滚投清算</div>
        </div> -->
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="60px"
                class="formList"
            >
				<el-form-item label="区域" style="width: 20%" > 
                    <dx-cascader size="mini"
                        :area_id.sync="form.areaId"
                        :maxLevel="2"
                    />
                </el-form-item>
                <el-form-item label="账期" style="width: 20%" >
                    <el-date-picker
						size="mini"
                        v-model="form.time"
                        type="year"
                        placeholder="选择账期"
                        value-format="yyyy"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item style="width: 30%">
                    <el-button
                        style="margin-left: 20px"
                        size="mini"
                        type="primary"
                        @click="handle_search"
                        >查询</el-button
                    >
					<el-button size="mini" type="orange" @click="handle_export">
						导出
					</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-content clearfix">
            <p class="g-unit">单位: 万元</p>
            <div class="content" style="margin-top: 0;">
                <div class="tableBox">
                    <el-table
						id="table3"
                        v-loading="tableLoading"
                        :data="tableData"
                        style="width: 100%"
                        class="tableTh28"
                        border
                        stripe
                        ref="table"
                    >
                        <el-table-column min-width="90" label="区域" prop="areaName" />
						<el-table-column v-for="(it, i) in titles" :key="i" :label="it.month" :prop="it.income"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
    name: "lightEva",
    data() {
        return {
            form: {
				areaId: '',
                time: this.moment().format('yyyy'),
            },
            tableData: [],
            tableLoading: false,
			titles: Array.from( new Array(12), (it, i) => it = {month: i + 1 + '月', income: 'indexValue' + (i + 1)})
        };
    },
    mounted() {
		// this.init();
	},
    methods: {
        async init() {
            let that = this;

            that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            that.form.areaId = that.accountInfo.areaId;
			that.getData();
        },
        getData() {
            var that = this;

            that.tableLoading = true;
            $budgetAPI.getIctDetailList(
                {
					areaId: that.form.areaId,
                    acctYear: that.form.time,
                },
                (res) => {
					that.tableData = [];
                    if (res && res.code == 0) {
						res.content.map( it => {
							it.detailList.map((item, i) => {
								it['indexValue' + (+item.acctMonth.slice(-2))] = item.indexValue
							})
						})
                        that.tableData = res.content;
                    }
                    that.tableLoading = false;
                }
            );
        },
        handle_search() {
			// if(!this.form.time || !this.form.areaId) {
			// 	this.$message.error("请选择账期和版本");
			// 	return false
			// }
            this.getData();
        },
		handle_export() {
			
			var xlsxParam = {
                raw: true,
            }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
            let workbook = XLSX.utils.book_new();
            let ws1 = XLSX.utils.table_to_sheet(
                document.querySelector("#table3"),
                xlsxParam
            );
            XLSX.utils.book_append_sheet(workbook, ws1, "ICT滚动清算");
            let wbout = XLSX.write(workbook, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            });
			if(!this.tableData.length) {
				this.$message.error('暂无数据可导出');
				return false
			}
			this.loading = this.$loading({
				lock: true,
				text: '正在',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream;charset=utf-8"',
                    }),
                    "ICT滚动清算.xlsx"
                );
				this.loading.close();
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbOut);
            }
		}
		// hanlde_version(val) {
		// 	this.form.fcDate = val;
		// 	this.getData();
		// }
    },
};
</script>

<style lang="scss" scoped>
.remark {
    padding-top: 5px;
    text-align: left;
    .attention {
        font-weight: bold;
    }
}
.table-content {
    .table-header {
        display: flex;
        justify-content: space-between;
        .table-title {
            font-size: 14px;
            font-weight: bold;
            height: 30px;
            line-height: 30px;
            span {
                display: inline-block;
                width: 5px;
                height: 5px;
                background-color: #418ee9;
                border-radius: 1000%;
                overflow: hidden;
                margin-right: 10px;
                margin-bottom: 3px;
            }
        }
    }
    .content {
        margin-top: 15px;
    }
}
</style>
